<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <!--
完成以下要求：（一定用http的方式访问本文件）

* 将js/getJSON.js中的getJSON函数从“回调函数形式”改写为“Promise形式”（返回promise实例）
* 用模块方式(module)使用js文件夹中的js文件内容
* 在此html中完成以下功能：
  使用 js/urls.js 中提供的movies和actors两个变量内容（内容是电影和演员数据对应的json文件名），用getJSON取得所有json文件中数据后（提示：使用Promise.all），按模版显示出列表，参见效果图，注意要显示出电影中所有的演员信息，需要把电影和演员数据组合。

数据说明

* jsons目录里有两种不同的数据，movie（电影）和actor（演员）
* movie数据字段含义：
  * id - 电影id
  * name - 名称
  * image - 海报
  * year - 年份
  * rating - 评分
  * genres - 类型（数组）
  * actorIds - 演员id（数组） 对应actor数据中的id
  * summary - 简介
* actor数据字段含义
  * id - 演员id
  * name - 名字
  * image - 照片

单条电影数据模版

<section class="movie">
  <h2>名称</h2>
  <div class="info">
    <div class="image">
      <img src="图片">
    </div>
    <div class="detail">
      <ul>
        <li>评分: xx</li>
        <li>年份: nnnn</li>
        <li>类型: 分类1/分类2</li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="summary">
    <h3>简介</h3>
    <summary>...（此内容需用js/utils.js中的nl2br函数转换\n为br）</summary>
  </div>
  <hr>
  <div class="actors">
    <div class="actor">
      <div class="photo"><img src="图片"></div>
      <div class="name">单条演员数据</div>
    </div>
  </div>
</section>
-->
    <div id="content"><!-- 结果显示位置 --></div>
    <script type="module">
      import { movies, actors } from "./js/urls.js";
      import getJSON from "./js/getJSON.js";
      import { nl2br } from "./js/utils.js"; // two = to

      const promises = [actors, ...movies]
        .map((path) => `./jsons/${path}`)
        .map((url) => getJSON(url));
      Promise.all(promises)
        .then(([actors, ...movies]) => {
          movies.map((movie) => {
            movie.actors = movie.actorIds.map((aid) => {
              return actors.find((a) => a.id === aid);
            });
            return movie;
          });
          // console.log(movies)
          return movies;
        })
        .then((movies) => {
          return movies
  .map(
   (m) => `<section class="movie">
  <h2>${m.name}</h2>
  <div class="info">
    <div class="image">
      <img src="../images/${m.image}">
    </div>
    <div class="detail">
      <ul>
        <li>评分: ${m.rating}</li>
        <li>年份: ${m.year}</li>
        <li>类型: ${m.genres.join("/")}</li>
      </ul>
    </div>
  </div>
  <hr>
  <div class="summary">
    <h3>简介</h3>
    <summary>${nl2br(m.summary)}</summary>
  </div>
  <hr>
  <div class="actors">
    ${m.actors
      .map(
        (a) => `<div class="actor">
      <div class="photo"><img src="../images/${a.image}"></div>
      <div class="name">${a.name}</div>
    </div>`)
      .join("")}
  </div>
</section>` ).join("");
}) 
.then((html) => {
          document.getElementById("content").innerHTML = html;
        });
    </script>
  </body>
</html>
